<template>
	<view>
		<view class="userInfo">
			<view class="userMessage">
				<view class="userLeft"><image :src="userInfo.avatar ? userInfo.avatar : '/static/user/default.png'"></image></view>
				<view class="userRight">
					<view class="userRight-top">
						<view class="nickName">{{ userInfo.nickname }}</view>
						<!-- <view v-if="userInfo.group_id > 1" class="userGrade">
							<image src="/static/images/partner.png"></image>
							<view class="gradeName">VIP{{ userInfo.group_id }}</view>
						</view> -->
					</view>
					<view class="userRight-bom">
						<text>邀请口令：{{ userInfo.phone }}</text>
						<text @click="copyWord(userInfo.phone)">复制</text>
					</view>
				</view>
			</view>
			<view class="userRank">
				<view class="rankItem">
					<view class="">会员级别</view>
					<view class="">VIP&nbsp;{{ userInfo.group_id }}</view>
				</view>
				<view class="rankItem">
					<view class="">团队级别</view>
					<view class="">VIP&nbsp;{{ userInfo.group_level }}</view>
				</view>
			</view>
			<view @click="goToHotpage('/pages/users/user_info/user_info')" class="setting"><image src="/static/images/setting.png"></image></view>
		</view>

		<view class="userBody">
			<view class="userCenter">
				<view class="myClass">
					<view @click="goToHotpage(`/pages/users/user_balance/user_balance?num=${userInfo.now_money}`)" class="classItem">
						<view class="className">我的余额</view>
						<view class="classNum">{{ userInfo.now_money }}</view>
					</view>
					<view @click="goToHotpage(`/pages/users/user_haidou/user_haidou?type=0&num=${userInfo.bean}`)" class="classItem">
						<view class="className">我的车豆</view>
						<view class="classNum">{{ userInfo.bean }}</view>
					</view>
					<view @click="goToHotpage(`/pages/users/user_haidou/user_haidou?type=1&num=${userInfo.coin}`)" class="classItem">
						<view class="className">我的车币</view>
						<view class="classNum">{{ userInfo.coin }}</view>
					</view>
					<!-- <view  @click="goToHotpage(`/pages/users/contribution/contribution?num=${userInfo.contribution}`)" class="classItem">
						<view class="className">
							贡献值
						</view>
						<view class="classNum">
							{{ userInfo.contribution }}
						</view>
					</view> -->
				</view>

				<view class="myMisson">
					<view class="missonHead">
						<view class="missonLeft">我的任务</view>
						<view @click="goToMission(0)" class="missonRight">
							<text>全部</text>
							<image src="/static/images/rightclick.png"></image>
						</view>
					</view>
					<view class="missonBtm">
						<view @click="goToMission(0)" class="missonItem">
							<view class="missonImg"><image src="/static/images/t6.png"></image></view>
							<view class="missonName">待提交</view>
							<view class="num" v-if="taskStatus.submit">{{ taskStatus.submit }}</view>
						</view>
						<view @click="goToMission(1)" class="missonItem">
							<view class="missonImg"><image src="/static/images/t7.png"></image></view>
							<view class="missonName">待审核</view>
							<view class="num" v-if="taskStatus.pass">{{ taskStatus.pass }}</view>
						</view>
						<view @click="goToMission(2)" class="missonItem">
							<view class="missonImg"><image src="/static/images/t8.png"></image></view>
							<view class="missonName">已失败</view>
							<view class="num" v-if="taskStatus.fail">{{ taskStatus.fail }}</view>
						</view>
						<view @click="goToMission(3)" class="missonItem">
							<view class="missonImg"><image src="/static/images/t9.png"></image></view>
							<view class="missonName">已完成</view>
							<view class="num" v-if="taskStatus.finish">{{ taskStatus.finish }}</view>
						</view>
					</view>
				</view>
				<view v-if="userInfo.group_id == 1" @click="gotoTabBar('/pages/member/index')" class="upgrade"><view class="upgradeBtn">去升级</view></view>

				<view class="function">
					<view class="functionHead"><view>必备功能</view></view>
					<view class="functionBtm">
						<view @click="goToHotpage('/pages/users/promoter-list/index')" class="functionItem">
							<view class="functionImg"><image src="/static/images/team.png"></image></view>
							<view class="functionName">我的团队</view>
						</view>
						<view @click="goToHotpage('/pages/users/user_spread_code/index')" class="functionItem">
							<view class="functionImg"><image src="/static/images/Invitation-code.png"></image></view>
							<view class="functionName">邀请码</view>
						</view>

						<!-- <view @click="goToHotpage('/pages/users/top_up/top_up')" class="functionItem">
							<view class="functionImg">
								<image src="/static/images/top-up.png"></image>
							</view>
							<view class="functionName">
								充值
							</view>
						</view> -->
						<view @click="goToHotpage('/pages/users/release-task/release-task')" class="functionItem">
							<view class="functionImg"><image src="/static/images/issue.png"></image></view>
							<view class="functionName">发布任务</view>
						</view>
						<view @click="goToHotpage('/pages/bind/douyin/douyin')" class="functionItem">
							<view class="functionImg"><image src="/static/images/douyin.png"></image></view>
							<view class="functionName">绑定抖音</view>
						</view>
						<!-- <view @click="goToHotpage('/pages/bind/kuaishou/kuaishou')" class="functionItem">
							<view class="functionImg">
								<image src="/static/images/kuaishou.png"></image>
							</view>
							<view class="functionName">
								绑定快手 
							</view>
						</view>
						<view @click="goToHotpage('/pages/bind/xiaohongshu/xiaohongshu')" class="functionItem">
							<view class="functionImg">
								<image src="/static/images/xhs.png"></image>
							</view>
							<view class="functionName">
								绑定小红书
							</view>
						</view> -->
						<view @click="goToHotpage('/pages/users/user_cash/index')" class="functionItem">
							<view class="functionImg"><image src="/static/images/deposit.png"></image></view>
							<view class="functionName">提现</view>
						</view>
						<view @click="goToHotpage('/pages/users/order_list/index')" class="functionItem">
							<view class="functionImg"><image src="/static/images/order.png"></image></view>
							<view class="functionName">我的订单</view>
						</view>
						<view @click="goToHotpage('/pages/order_addcart/order_addcart')" class="functionItem">
							<view class="functionImg"><image src="/static/images/shopping-cart.png"></image></view>
							<view class="functionName">购物车</view>
						</view>
						<view @click="goToHotpage('/pages/users/user_collect/user_collect')" class="functionItem">
							<view class="functionImg"><image src="/static/images/collection.png"></image></view>
							<view class="functionName">我的收藏</view>
						</view>
						<view @click="goToHotpage('/pages/users/refund/list')" class="functionItem">
							<view class="functionImg"><image src="/static/images/aftersale.png"></image></view>
							<view class="functionName">售后</view>
						</view>
						<view @click="goToHotpage('/pages/users/user_address_list/index')" class="functionItem">
							<view class="functionImg"><image src="/static/images/location.png"></image></view>
							<view class="functionName">收货地址</view>
						</view>
						<view @click="goToHotpage('/pages/users/double/double')" class="functionItem">
							<view class="functionImg"><image src="/static/images/coupon.png"></image></view>
							<view class="functionName">优惠劵</view>
						</view>
						<view @click="goToHotpage('/pages/service/service')" class="functionItem">
							<view class="functionImg"><image src="/static/images/kefu.png"></image></view>
							<view class="functionName">在线客服</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			taskStatus: {}
		};
	},
	onShow() {
		this.getUserInfo();
		this.getTaskNum();
	},
	methods: {
		/**
		 * 获取个人用户信息
		 */
		getUserInfo: function() {
			let that = this;
			that.$api.getUserInfo(res => {
				if (res.status == 400) {
					that.$common.errorToShow('请先登录');
					setTimeout(() => {
						that.$common.navigateTo('/pages/login/login');
					}, 1000);
					return;
				}
				that.userInfo = res.data;
			});
		},
		// 复制口令
		copyWord(word) {
			uni.setClipboardData({
				data: word,
				success: function(res) {
					uni.showToast({
						title: '已复制到剪辑版'
					});
				}
			});
		},

		// 跳转到我的任务
		goToMission(id) {
			uni.navigateTo({
				url: `/pages/users/mission_list/mission_list?id=${id}`
			});
		},
		// 功能页面跳转
		goToHotpage(url) {
			uni.navigateTo({
				url
			});
		},
		gotoTabBar(url) {
			uni.switchTab({
				url
			});
		},
		getTaskNum() {
			this.$api.getUserReceipt({}, res => {
				if ((res.status = 200)) {
					this.taskStatus = res.data;
				}
			});
		}
	}
};
</script>

<style lang="less">
.userInfo {
	height: 360rpx;
	background-color: #ffffff;
	padding: 20rpx 30rpx 0 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	// justify-content: space-between;
	overflow: hidden;
	background-color: #f95050;
	border-radius: 0 0 80rpx 80rpx;
	.userMessage {
		display: flex;
		height: 120rpx;
		align-items: center;
		.userLeft {
			position: relative;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 25rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.userRight {
			.userRight-top {
				display: flex;
				margin-bottom: 15rpx;
				align-items: center;
				.nickName {
					font-size: 46rpx;
					font-weight: bold;
					color: #ffffff;
					margin-right: 10rpx;
				}
				.userGrade {
					position: relative;
					width: 140rpx;
					height: 45rpx;
					.gradeName {
						position: absolute;
						top: 60%;
						left: 65%;
						transform: translate(-50%, -50%);
						font-size: 24rpx;
						color: #6c2a0a;
						white-space: nowrap;
					}
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.userRight-bom {
				text:nth-child(1) {
					color: #ffffff;
				}
				text:nth-child(2) {
					display: inline-block;
					text-align: center;
					margin-left: 10rpx;
					width: 60rpx;
					height: 32rpx;
					background: #f1d4a9;
					border-radius: 5rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #6c2a0a;
				}
			}
		}
	}

	.userRank {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 710rpx;
		height: 160rpx;
		margin: 0 auto;
		background-color: #fae0b5;
		text-align: center;
		border-radius: 20rpx;
		color: #3c1e00;
		font-size: 30rpx;
		.rankItem {
			view:nth-child(2) {
				font-weight: 700;
				margin-top: 10rpx;
			}
		}
	}

	.setting {
		position: absolute;
		top: 20rpx;
		right: 30rpx;
		width: 39rpx;
		height: 39rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

.userBody {
	position: relative;
	margin-top: 20rpx;
	.userCenter {
		// position: absolute;
		// top: -220rpx;
		// left: 50%;
		// transform: translateX(-50%);
		width: 710rpx;
		margin: 0 auto;
		.myClass {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 200rpx;
			// background: url(../../static/images/background5.png);
			// background-size: 100%;
			// background-repeat: no-repeat;
			color: #3c1e00;
			border-radius: 20rpx;
			font-size: 30rpx;
			background-color: #ffffff;
			.classItem {
				text-align: center;
				.className {
					margin-bottom: 25rpx;
				}
				.classNum {
					font-weight: 700;
				}
			}
		}

		.myMisson,
		.memberCenter {
			height: 238rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin: 40rpx 0 20rpx;
			.missonHead,
			.memberHead {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				color: #666666;
				height: 80rpx;
				border-bottom: 1rpx solid #f5f5f5;
				.missonLeft,
				.memberLeft {
					font-size: 30rpx;
				}
				.missonRight,
				.memberRight {
					font-size: 26rpx;
					text {
						vertical-align: middle;
						margin-right: 20rpx;
					}
					image {
						width: 15rpx;
						height: 25rpx;
						vertical-align: middle;
						margin-top: 5rpx;
					}
				}
			}
			.missonBtm {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 158rpx;
				.missonItem {
					position: relative;
					.missonImg {
						width: 50rpx;
						height: 50rpx;
						margin: 0 auto 15rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.missonName {
						font-size: 25rpx;
						color: #333333;
					}
					.num {
						position: absolute;
						top: -16rpx;
						right: -10rpx;
						width: 30rpx;
						height: 30rpx;
						border-radius: 30rpx;
						border: #df2e26 2rpx solid;
						overflow: hidden;
						text-align: center;
						line-height: 30rpx;
						color: #df2e26;
						background-color: #fff;
						font-size: 24rpx;
					}
				}
			}
		}

		.upgrade {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 90rpx;
			margin-bottom: 20rpx;
			padding-right: 30rpx;
			background: url(../../static/images/upgrade.png);
			background-size: 100%;
			background-repeat: no-repeat;
			border-radius: 45rpx;
			.upgradeBtn {
				width: 161rpx;
				height: 50rpx;
				background: linear-gradient(-90deg, #492d04 0%, #6a4814 77%, #875a17 99%);
				border-radius: 25rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #f1e2ca;
			}
		}

		.function {
			height: 606rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.functionHead {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 30rpx;
				color: #666666;
				height: 80rpx;
				border-bottom: 1rpx solid #f5f5f5;
				font-size: 30rpx;
			}

			.functionBtm {
				display: flex;
				// justify-content: space-between;
				align-content: space-around;
				flex-direction: row;
				flex-wrap: wrap;
				height: 526rpx;
				.functionItem {
					width: 25%;
					text-align: center;
					.functionImg {
						width: 40rpx;
						height: 40rpx;
						margin: 0 auto 15rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.functionName {
						font-size: 25rpx;
						color: #333333;
					}
				}
			}
		}
	}
}
</style>
